import React, { Component } from 'react'
import store from '../../redux/store';
import {jiaAction, jianAction, asyncJiaAction} from '../../redux/actions/renqiActions'
import {incrementAction, decrementAction} from '../../redux/actions/zanActions';
export default class State extends Component {
    render() {
        return (
            <div className="container">
                <h2>redux 的使用</h2>   
                <hr />

                <h4>当前的人气值为 {store.getState().renqi}</h4>

                <button onClick={this.add}>增加</button>
                <button onClick={this.minus}>减少</button>
                <button onClick={this.asyncAdd}>1s 后增加人气</button>

                <h4>当前的点赞数 {store.getState().zan}</h4>
                <button onClick={this.inc}>增加</button>
                <button onClick={this.des}>减少</button>
            </div>
        )
    }

    inc = () => {
        store.dispatch(incrementAction(1));
    }

    des = () => {
        store.dispatch(decrementAction(1));
    }



    add = () => {
        store.dispatch(jiaAction(2));
    }

    minus = () => {
        store.dispatch(jianAction(1));
    }

    //异步增加人气值
    asyncAdd = () => {
        store.dispatch(asyncJiaAction(50));
    }


    componentDidMount(){
        console.log(store.getState());
    }




















    //生命周期钩子
    // componentDidMount(){
    //     //容器对象 订阅
    //     store.subscribe(() => {
    //         // console.log('我的状态改变啦!!');
    //         //更新组件
    //         this.forceUpdate();
    //     })
    // }
}
